<template>
  <div>
    <!-- 面包屑导航栏 -->
    <AppBreadcrumb :breadcrumbs="breadcrumbs" :breadcrumbItemStyle="breadcrumbItemStyle" />

    <!-- 作业标题和状态 -->
    <div class="info" @click="navigateToAssignments">
      <img src="@/assets/picture/arrow-left.png" alt="返回" class="arrow-icon" />
      <h2 class="title">{{ assignmentTitle }}</h2>
      <span class="badge" :class="statusBadgeClass">{{ statusLabel }}</span>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
      <router-link 
        :to="{ name: 'AssignmentList', params: { semesterId: semesterId, homeworkId: homeworkId } }" 
        class="nav-link"
      >
        作业列表
      </router-link>
      <router-link 
        :to="{ name: 'AssignmentDetail', params: { homeworkId: homeworkId, semesterId: semesterId } }" 
        class="nav-link"
      >
        作业详细
      </router-link>
      <router-link 
        :to="{ name: 'AdvancedSettings', params: { homeworkId: homeworkId, semesterId: semesterId } }" 
        class="nav-link"
      >
        高级设置
      </router-link>
    </nav>
  </div>
</template>

<script>
import { ref, onMounted, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AppBreadcrumb from '@/components/Breadcrumb.vue';
import { fetchClassDetails, fetchStudentAssignmentDetails } from '@/services/api';

export default {
  name: 'AssignmentNavBar',
  components: {
    AppBreadcrumb,
  },
  props: {
    homeworkId: {
      type: [String, Number],
      required: true,
    },
    semesterId: {
      type: [String, Number],
      required: true,
    },
  },
  setup(props) {
    const courseName = ref('');
    const techId = ref(null);
    const studentName = ref('');
    const breadcrumbItemStyle = ref({
      textDecoration: 'none',
      color: 'gray',
      fontSize: '14px',
      margin:'0px 0px -20px -4px',
    });

    // 从 localStorage 获取作业标题和状态
    const assignmentTitle = ref(localStorage.getItem('hmk_title') || '未找到作业名');
    const assignmentStatus = ref(localStorage.getItem('hmk_status') || '新建中');

    const route = useRoute();
    const router = useRouter();

    const breadcrumbs = computed(() => {
      const currentPageLabel = route.meta.breadcrumb || route.name;
      const breadcrumbTrail = [
        {
          path: `/class-management/${props.semesterId}/TechNoti`,
          label: courseName.value || '课程',
        },
        {
          path: `/class-management/${props.semesterId}/TechAssignments`,
          label: '图文作业',
        },
        {
          path: route.path,
          label: currentPageLabel,
        },
      ];

      if (route.name === 'StudentAssignmentReview' && studentName.value) {
        breadcrumbTrail.push({
          path: route.path,
          label: studentName.value,
        });
      }

      return breadcrumbTrail;
    });

    const loadCourseName = async () => {
      const semesterId = props.semesterId;
      const techIdValue = techId.value;

      try {
        const response = await fetchClassDetails(semesterId, techIdValue);
        if (response.data.status === 1) {
          courseName.value = response.data.data.semester_name;
        } else {
          console.error('获取课堂详情失败:', response.data.msg);
        }
      } catch (error) {
        console.error('加载课堂详情失败:', error);
      }
    };

    const loadStudentName = async () => {
      const stuHmwkId = route.params.stu_hmwk_id;
      if (!stuHmwkId) return;

      try {
        const response = await fetchStudentAssignmentDetails(stuHmwkId);
        if (response.data.status === 1) {
          studentName.value = response.data.data.username;
        } else {
          console.error('获取学生作业详情失败:', response.data.msg);
        }
      } catch (error) {
        console.error('加载学生作业详情失败:', error);
      }
    };

    // 导航回到图文作业页
    const navigateToAssignments = () => {
     router.push({
        path: `/class-management/${props.semesterId}/TechAssignments`,});
    };

    // 根据作业状态返回对应的标签
    const statusLabel = computed(() => {
      switch (assignmentStatus.value) {
        case '0':
          return '未发布';
        case '1':
          return '未开始';
        case '2':
          return '进行中';
        case '3':
          return '已截止';
        default:
          return '新建中';
      }
    });

    // 根据作业状态返回对应的样式类
    const statusBadgeClass = computed(() => {
      switch (assignmentStatus.value) {
        case '0':
          return 'badge-unpublished';
        case '1':
          return 'badge-unstart';
        case '2':
          return 'badge-in-progress';
        case '3':
          return 'badge-closed';
        default:
          return 'badge-new';
      }
    });

    onMounted(() => {
      techId.value = localStorage.getItem('id');
      loadCourseName();

      if (route.name === 'StudentAssignmentReview') {
        loadStudentName();
      }
    });

    watch(
      () => route.name,
      (newRoute) => {
        if (newRoute === 'StudentAssignmentReview') {
          loadStudentName();
        }
      }
    );

    return {
      breadcrumbs,
      breadcrumbItemStyle,
      assignmentTitle,
      statusLabel,
      statusBadgeClass,
      navigateToAssignments, // 导航方法
    };
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  gap: 1px;
  background-color: #FAFAFA;
  width: 400px;
}

.nav-link {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  color: rgba(102, 102, 102, 0.778);
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
  border-bottom: none;
  background-color: #f9f9f9;
  border-radius: 10px 10px 0px 0px;
}

.nav-link:not(.router-link-exact-active) {
  background-color: #f5f5f5;
}

.nav-link.router-link-exact-active {
  font-weight: bold;
  color: #333;
  background-color: #ffffff;
  border-bottom: 2px solid #ffffff; /* 突出选中的标签 */
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0px;
  font-size: 16px;
  cursor: pointer; /* 指针样式，表明可点击 */
  height: 55px;
}

.title {
  font-weight: bold;
  margin-right: 10px;
}

.badge {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: none;
}

.badge-unpublished {
  background-color: #ffd6d6;
  color: #d9534f;
}

.badge-unstart {
  background-color: #cae2f9;
  color: #519bd5;
}

.badge-in-progress {
  background-color: #d6ffdb;
  color: #3b995c;
}

.badge-closed {
  background-color: #f0f0f0;
  color: #666;
}
.badge-new{
    background-color: #f3e4b7f0;
  color:  #dda90ff0;
}
</style>
